<%@ page language="java" contentType="text/html; charset=UTF-8"
          pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <%@ include file="../include/css.jsp" %>

</head>
<body class="hold-transition skin-blue sidebar-mini">
                <div class="container ">
                    <div class="well-sm">
                        <form class="form-inline" style="display:inline-block">
                            <input type="text" name="name" class="form-control" placeholder="插件关键字" value="${param.name}">
                            <button class="btn btn-default" >搜索</button>
                        </form>
                        <button class="btn btn-primary" type="button" style="display:inline-block" id="addBtn">添加</button>
                    </div>

                    <table class="table text-nowrap table-striped table-hover table-condensed table-condensed" >
                        <tbody>
                        <tr>
                            <td>id</td>
                            <td>名称</td>
                            <td>类型</td>
                            <td>图标</td>
                            <td>运行时环境</td>
                            <td>描述</td>
                            <td>创建时间</td>
                            <td>文件路径</td>
                            <td>操作</td>
                        </tr>
                        <%--循环迭代list  每次一个tr--%>
                        <c:forEach items="${list.list}" var="plugin">
                            <tr>
                                    <th>
                                            ${plugin.id}
                                    </th>
                                    <th>
                                            ${plugin.name}
                                    </th>
                                    <th>
                                            ${plugin.type}
                                    </th>
                                    <th>
                                            <img src="http://127.0.0.1/pictures?picturePath=${plugin.sign}" style="height: 20px; width:20px">
                                    </th>
                                    <th>
                                            ${plugin.runtimeEnvironment}
                                    </th>
                                    <th>
                                            ${plugin.describe}
                                    </th>
                                    <th>
                                            <fmt:formatDate value="${plugin.createTime}" pattern="yyyy年MM月dd日"></fmt:formatDate>
                                    </th>
                                    <th>
                                            ${plugin.filePath}
                                    </th>

                                <th>
                                    <a href="/plugin/${plugin.id}" rel="${plugin.id}" class="details">详情</a>
                                    <a href="/plugin/update/${plugin.id}" rel="${plugin.id}" class="update">编辑</a>
                                    <a href="javascript:;" class="del" rel="${plugin.id}">删除</a>
                                    <a href="/plugin/download?filePath=${plugin.filePath}">下载</a>
                                </th>
                            </tr>
                        </c:forEach>

                        <!-- Split button -->
                        <ul id="pagination-demo" class="pagination pull-right"></ul>
                        <label ><strong>${list.total}条数据</strong></label>
                        </tbody>
                    </table>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary">每页显示${pageSize}条数据</button>
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;" class="changePageSize" rel="5">5</a></li>
                            <li><a href="javascript:;" class="changePageSize" rel="10">10</a></li>
                            <li><a href="javascript:;" class="changePageSize" rel="20">20</a></li>
                            <li role="separator" class="divider changePageSize"></li>
                            <li><a href="javascript:;" class="changePageSize" rel="30">30</a></li>
                        </ul>

                    </div>
                </div>

<script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>

<%@ include file="../include/js.jsp"%>
<script>
    $(function () {

        var p = 1;

        $("#pagination-demo").twbsPagination({
            totalPages:${list.pages},
            visiblePages:3,
            first:'首页',
            last:'末页',
            prev:'上一页',
            next:'下一页',
            href:"/plugin/all?p={{number}}&name="+encodeURIComponent('${param.name}'),
        });

        $(".changePageSize").click(function () {
            var pageSize = $(this).attr("rel");
            window.location.href="/plugin/all?p=" + encodeURIComponent('${param.p}') + "&name=" + encodeURIComponent('${param.name}') + "&pageSize=" + pageSize
        });

        $(".details").click(function () {
            var id = $(this).attr("rel");
            window.location.href="/plugin/"+id;
        });

        $(".del").click(function () {
            var id = $(this).attr("rel");
            layer.confirm("你确定要删除么？", function (index) {
                /* alert(id); */
                layer.close(index);
                $.ajax({
                    url: "/plugin/del",
                    type: "get",
                    data: {
                        "id": id
                    },
                    success : function(data){
                        if(data.state == 'success') {
                            window.location.href="/plugin/all";
                        }else {
                            layer.alert("失败请重试");
                        }
                    },
                })
            })
        });

        $("#addBtn").click(function () {
            window.location.href="/plugin/add";
        })

    });
</script>
</body>
</html>